import React from 'react';
import {
  Text,
  View,
} from '@ray-js/ray';
import clsx from 'clsx';
import Strings from '@/i18n';
import _ from 'lodash';
import styles from './index.module.less';
import { Switch } from '../Switch';

export function TimeModeSet({
  value,
  changeValue,
}: {
  value: '12h' | '24h';
  changeValue: (val: '12h' | '24h') => void;
}) {
  return (
    <View className={styles.container}>
      <Text className={styles.title}>{Strings.getLang('timeMode')}</Text>

      <View className={clsx(styles.switchBox)}>
        <Text>12h</Text>
        <View className={styles.center}>
          <Switch
            value={value === '24h'}
            onValueChange={() => {
              changeValue(value === '24h' ? '12h' : '24h');
            }}
            showText={false}
          />
        </View>

        <Text>24h</Text>
      </View>
    </View>
  );
}
